import React, { useState } from 'react';

import MyTable from '../../../components/layout/MyTable/MyTable';

/* 引入antd */
import { Modal, Input, Button } from 'antd';

/* 引入上下文 */
import useStore from "../../../context/useStore";

import { useObserver } from 'mobx-react-lite';

const RoomManager: React.FC = () => {
    const { manager } = useStore()
    /* 对话框开关 */
    const [visible, setVisible] = useState<boolean>(false);
    /* 保存input框输入内容 */
    const [addText, setAddText] = useState<string>('');

    /* 点击弹出对话框 */
    function showModal() {
        setVisible(true)
    };

    /* 点击确定 */
    function handleOk() {
        manager.addRoomAction(addText);
        setVisible(false)
    };

    /* 点击取消 */
    function handleCancel() {
        /* 清空输入框 */
        setAddText('');
        setVisible(false)
    };

    /* input输入框 */
    function getValue(e: any) {
        /* console.log('====================================');
        console.log('getValue..',e.target.value);
        console.log('===================================='); */

        setAddText(e.target.value);
    };

    return useObserver(() => <div>
        <p>教室管理</p>
        <Button type="primary" onClick={showModal} style={{marginBottom:20}}>
            +添加教室号
        </Button>
        <>
            <Modal
                title="创建新类型"
                visible={visible}
                onOk={handleOk}
                onCancel={handleCancel}
                okText="确认"
                cancelText="取消"
            >
                <Input placeholder="请输入类型名称" value={addText} onChange={getValue} />
            </Modal>
        </>
        <MyTable></MyTable>
    </div>
    );
}

export default RoomManager;
